<template>
  <div class="c-dropdown-menu-item" :class="{_selected:selected}" @click="handleClick">
    <slot></slot>
  </div>
</template>
<script lang="ts" setup>
import { ref, inject } from "vue";
import { DropdownModel } from "./DropdownModel";

const props = defineProps({
  closeOnClick: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false // 还未处理禁用样式
  },
  selected: {
    type: Boolean,
    default: false
  }

});

const dropDownModel = inject('dropdownModel') as DropdownModel;

// const handleCommand = inject('handleCommand') as (param: any) => void;

const emit = defineEmits<{
  (event: 'click', evt: MouseEvent): void
}>();

function handleClick(evt:MouseEvent){
  if (props.disabled) return;
  // if (props.command) handleCommand(props.command);
  if (props.closeOnClick) dropDownModel.close();
  emit('click', evt);
}

</script>
<style lang="scss">
.c-dropdown-menu-item{
  background: white;
  color: rgba(0, 0, 0, 0.85);
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  > span {
    text-overflow: ellipsis;
    overflow-x: hidden;
  }
  img {
    margin-right: 4px
  }
  &:hover {
    background-color:#E8EFF7 ;
  }
  &._selected{
    background-color:#E8EFF7 ; // #ecf5ff
  }
}
</style>